<template>
	<view class="page-container">
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 font-bold common-title">{{ lang_shop.editFeature }}</view>
				<view class="u-f-32 font-medio" @click="saveAction">{{ lang_common.done }}</view>
			</view>
		</view>
		
		<view>
			<view
			v-for="(item, index) in 3"
			:key="index"
			class="card-item"
			>
				<view :class="['card-box', !index ? 'u-m-t-22' : '']">
					<view class="u-m-b-8 u-f-32 u-lh-44 font-medio">{{ lang_shop.feature }}{{ index + 1 }}</view>
					<input v-model="form['feature' + (index + 1)]" :placeholder="`${ lang_shop.featureTips }${ index + 1 }`" maxlength="20"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { merchantUpdateInfo } from '@/api/merchant/merchant.js'
	export default {
		data() {
			return {
				isClick: false,
				form: {}
			}
		},
		onLoad() {
			let obj = this.shopInfo || {}
			for (let key in obj) {
				let keyPrefix = 'feature'
				if (!key.indexOf(keyPrefix)) {
					this.$set(this.form, key, obj[key])
				}
			}
		},
		methods: {
			// tips: 至少输入一条信息
			saveAction() {
				if (this.isClick) return;
				this.isClick = true
				let queryObj = { ...this.shopInfo, ...this.form }
				merchantUpdateInfo(queryObj).then(data => {
					this.$store.dispatch('updateShopInfo')
					this.$api.msg('修改成功')
					let timer = setTimeout(() => {
						clearTimeout(timer)
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => {
					this.isClick = false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		&-item {
			padding: 0 34rpx 10rpx;
		}
		
		&-box {
			padding: 20rpx 24rpx;
			background-color: #FFFFFF;
			border-radius: 4rpx;
		}
	}
</style>
